<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app1" style="border: 1px solid black;">
	 <h3>这是 app1 的作用域</h3>
	 <my-component></my-component>
	 </div>
	 <div id="app2" style="border: 1px solid black;">
	 <h3>这是 app2 的作用域</h3>
	 <my-component></my-component>
	 </div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	 <script>
		 // 注册全局组件
		 Vue.component('MyComponent', {
		 // 注意：template 使用的是模板字符串，可以换行
		 template: `<button @click='addCount'>
		 全局组件，被点击次数是{{count}}
		 </button>`,
		 // 注意：组件的 data 必须是函数，数据是独立的，不会相互影响
		 data() {
		 return {
		 count: 0
		 }
		 },
		 methods: {
		 addCount() {
		 this.count++;
		 }
		 }
		 });
		 // 创建 Vue 实例 app1
		 const app1 = new Vue({
		 el: '#app1'
		 })
		 // 创建 Vue 实例 app2
		 const app2 = new Vue({
		 el: '#app2'
		 })
	</body>
</html>
